<template>
    <section id="wrapper" class="login-register">
        <div class="login-box login-sidebar">
            <div class="white-box">
                <div class="form-horizontal form-material" id="loginform" @keydown.enter="checkCreds">
                    <a href="javascript:void(0)" class="text-center db"><img src="@/static/img/funkey.png" width="100"
                                                                             alt="Home"/><br/>
                    </a>

                    <div class="form-group m-t-40">
                        <div class="col-xs-12">
                            <input class="form-control username" type="text" required="" placeholder="Username" v-model="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="form-control" type="password" required="" placeholder="Password" v-model="password">
                        </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light"
                                    type="button" @click="checkCreds" :disabled="loading">Login In
                            </button>
                        </div>
                    </div>
                    <div class="form-group m-b-0">
                        <div class="col-sm-12 text-center">
                            <p>Don't have an account? <a href="javascript:void(0)" class="text-primary m-l-5"><b>Contact the tech group</b></a>
                            </p>
                        </div>
                    </div>
                </div>
                <form class="form-horizontal" id="recoverform" action="index.html">
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <h3>Recover Password</h3>
                            <p class="text-muted">Enter your Email and instructions will be sent to you! </p>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light"
                                    type="submit">Reset
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
</template>

<script>
    import {login} from '@/api/auth'

    export default {
        name: 'Login',
        mounted() {
            $(".username").focus() // 进入页面自动对焦用户名输入框
        },
        data() {
            return {
                loading: false,
                username: '',
                password: ''
            }
        },
        methods: {
            // 点击登录
            checkCreds() {
                if (!this.username.trim().length ||　!this.username.trim().length) {
                    return $.toast({
                        heading: 'error',
                        text: 'Type username and password',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                }
                this.loading = true
                login(this.username, this.password).then( res => {
                    if (res.data.code === 0) {
                        this.$store.commit('SET_USER', res.data.ctx.username)
                        this.$store.commit('SET_TOKEN', res.data.ctx.auth)
                        this.$store.commit('SET_GROUP', res.data.ctx.group_id)
                        this.$router.push(this.$route.query.redirect || '/')
                    } else {
                        this.loading = false
                        $.toast({
                            heading: 'error',
                            text: res.data.msg,
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                        });
                    }

                } ).catch( e => {
                    this.loading = false
                    $.toast({
                        heading: 'error',
                        text: 'Network Error',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
